/* 以降スマホサイズ */
@media screen and (max-width: 480px) {

body{
  min-width: 0px!important;
  width: 100%;
}

/*ヘッダーロゴ アンドロイド専用*/
.Android .header-logo{
  padding-left: 15px!important;
  width: 120px!important;
  height: auto!important;
}
.Android .header-logo img{
  width: 100%!important;
  max-width: 100%!important;
  height: auto!important;
}

.inner,
.inner-wid{
  width:100%!important;
  margin:0 auto;
}

header a,
#header-bottom{
  display: none;
}

/* ヘッダーのタイトル */
header h1{
  font-size:1.4rem!important;
}

/* ハンバーガーメニュー */
.drawer{
  position: absolute;
  top:1;
  right:10;
}

/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 30px;
  border-radius: 3px;
  background: #f2f4e6;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 10px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 10px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* メニューのデザイン*/
.drawer-content {
  width: 70%;
  height: 100%;
  position: fixed;
  top:0;
  right:-100%;
  z-index: 99;
  background: url("../img/main-menu-img.jpg");
  transition: .5s;
  text-align: center;
  padding-top:40px;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  right: 0;
}

/* メニューのフォント*/
.drawer-item a{
  display: block;
  padding:15px;
  font-size: 1.8rem;
  color:#f2f4e6;
  transition: .3s ease;
}

.drawer-item a:hover{
  text-decoration: underline;
}

/* フェイスブックアイコンの区切り線を消す*/
#f-form{
  border-left: none!important;
}

.Android #f-form{
  border-left: none!important;
}

/* メニュー背景の花の画像*/
#drawer-img{
  position: absolute;
  right: -10;
  bottom:15;
  z-index: -1;
}

#drawer-img img{
  width: 70%;
  height: auto;
}

/* メニューのお問い合わせ*/
#contact_form a{
  margin-top:10px;
}

/* 背景の花の画像*/
#left-img,
#right-img{
  display: none;
}

/*top動画*/
#main-movie{
  padding-top: 50px;
}

#main-movie video{
  width: 100%;
  height: auto;
}

/* 新着情報*/
#main{
  width:100%!important;
}

/* 新着情報のタイトル*/
#latest{
  display: block!important;
  padding: 35px 15px 25px!important;
  width: 100%!important;
}

#latest .title h3{
  font-size: 1.6rem!important;
  text-align: center!important;
  padding-right: 0!important;
  padding-bottom: 15px;
}

#latest img,
#main-text img{
  width: 110px;
  height: auto;
  top:-12!important;
  right: -5!important;
}

/*新着情報の記事*/
#latest-article{
  width:100%!important;
  padding-left: 0!important;
}

#latest-article li{
  display: block!important;
  border-bottom:1px solid #333;
  padding-bottom: 5px;
  margin-bottom: 8px;
}

#latest-article a:hover{
  opacity: .8;
  text-decoration: none!important;
}

/* ここからフッター*/
footer{
  position: relative;
  padding:0 20px;
}

/* フッター背景の花の画像*/
#footer-img{
  position: absolute;
  bottom:10;
  left: 10;
}
#footer-img img{
  width: 60%;
  height: auto;
}

#footer-inner #footer-text{
  padding:20px 0 15px 0!important;
}

/* フッター背景の黒ハッチング*/
#footer-inner::before{
  display: none!important;
}

/* フッターメニュー*/
#footer-menu ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
  padding:30px 0 0!important;
}

#footer-menu li{
  width: 100%;
  text-align: center;
  z-index: 0!important;
}

#footer-menu a{
  display: block;
  padding: 5px 0!important;
  font-size:1.6rem!important;
  white-space: nowrap;
}

/* アンドロイド用*/
.Android #latest .title img{
  position:absolute;
  top:-14!important;
  right: 0!important;
}

.Android #main-text .title img{
  position:absolute;
  top:-14!important;
  right: 0!important;
}

.Android #latest-article{
  padding-top:15px!important;
}

.Android #text{
  padding-top: 15px;
}
}

/* ==========
=======以降タブレットサイズ=======
==========*/
@media screen and (min-width: 481px) {
@media screen and (max-width: 960px){
  body{
    min-width: 481px;
    width: 100%;
    height: auto;
  }

  .inner,
  .inner-wid{
    min-width: 0;
    width:100%;
    margin:0 auto;
  }

  #header-inner ul::before,
  #footer-inner::before,
  #container-inner::before{
    width: 100%!important;
    height: auto;
  }

  .container-background{
    padding:20px 25px 50px!important;
  }

  #footer-text{
    padding:30px 35px 40px!important;
  }

  /* top動画*/
  #main-movie{
    padding: 0!important;
  }

  #main-movie video{
    width: 100%;
    height: auto;
  }

  /* 新着情報*/
  #latest{
    padding: 60px 15px 40px!important;
    width: 85%!important;
  }

  #latest-article{
    width:100%!important;
  }

  /* 背景の花の画像*/
  #left-img{
    display: none;
  }
  #right-img{
    display: none;
  }

  /* スマホ表示でのサイドメニュー*/
  .drawer {
    display: none;
  }
  /* スマホ表示での背景の花*/
  #footer-img{
    display: none;
  }
}
}

/* ==========
=======以降pcサイズ=======
==========*/
@media screen and (min-width: 961px) {
  /* スマホ表示でのサイドメニュー*/
  .drawer {
  display: none;
  }
  /* スマホ表示での背景の花*/
  #footer-img{
  display: none;
  }
}

/*
=======================================
=============
下層ページ共通
=======================================
=============*/
@media screen and (max-width: 480px) {
/* ヘッダー */
.header{
  position: fixed;
  top:0;
}

/* ヘッダー背景画像の高さ */
.header::before{
  height: 50px;
}

/* ヘッダーのタイトル */
.header h1{
  font-size:1.4rem!important;
}

/* facebookアイコン */
.f-form{
  display: none;
}

/* メインメニュー */
.header-menu{
  display: none;
}

.contact-form{
  display: none;
}

/* 白い背景画像*/
.container-background{
  width: 100%;
  background-size:102% 102%!important;
  display: flex;
  flex-direction: column;
  padding: 0 0 15px !important;
}
}

/*
=======================================
=============
profile.css
=======================================
=============*/
@media screen and (max-width: 480px) {
/* プロフィール画像 */
#pf-flex{
  display: block;
}

#pf-img{
  width:100%!important;
  padding-right:0!important;
  padding-left:0!important;
}

/* プロフィール */
#profile{
  width:100%!important;
  padding:75px 15px 0;
}
#profile-text{
  width: 100%!important;
}

#profile-text h3{
  padding:15px 0 10px!important;
}

#profile-text p{
  padding-left: 0!important;
}

/* 役職 */
#position-text{
  padding:0 0 30px!important;
}

#position-text h3{
  padding:25px 0 10px!important;
}


/* 演能経歴と活動経歴共通 */
.career{
  padding: 15px 15px 25px;
}

.career-flex{
  display: block!important;
}

.career-title h2{
  padding-bottom: 30px!important;
}

/* 演能経歴 */
#career-text{
  width: 100%!important;
  padding-left:0!important;
}

#career-text li{
  display: block!important;
  padding-bottom: 15px!important
}

#career-text ul{
  padding-right: 0!important;
}

#career-text ul li time{
  padding-bottom: 3px;
}

#career-text p{
  width: 100%!important;
}

/* 演能経歴と活動経歴の最後にある一文 */
.last-text{
  padding:10px 0 0!important;
}

/* 活動経歴 */
#active-career-text{
  width: 100%!important;
  padding-left:0!important;
}

#active-career-text time{
  width: 100%!important;
}

#active-career-text p{
  width: 100%!important;
}

#active-career-text ul{
  padding-right: 0!important;
}

#active-career-text ul li{
  display: block!important;
}

/* プロフィールページのお稽古場 */
#rehear-margin {
  margin:10px 15px 0;
}

#rehear-margin ul{
  width:100%!important;
}

.rehearsal-content ul{
  padding-left:5px;
}
}

/*
=======================================
=============
info.htmlのcss
=======================================
=============*/
@media screen and (max-width: 480px) {

#info{
  padding: 80px 15px 45px!important;
}

/* 能演案内メイン画像*/
.info-title-img img{
  width: 100%!important;
}

/* 能演案内のタイトル*/
.info-content h3 {
  padding: 3px 1em !important;
}
/* Safari (ただし、iOSのChromeにも適用される) */
_::-webkit-full-page-media, _:future, :root .info-content h3 {
    padding: 3px 1em !important;
}
.iPhone .info-content h3 {
  padding: 3px 1em !important;
}

.info-content .info-text{
  padding-left: 1em!important;
}

.info-link{
  padding:20px 0 20px 20px!important;
}

/* チケットのお問い合わせ*/
#ticket-contact{
padding-top: 40px!important;
padding-right: 15px;
}

#ticket-form{
  padding-left: 20px!important;
}

/* 問い合わせの電話番号クリックで電話アプリ立ち上げ*/
a[href^="tel:"]{
    pointer-events:auto!important;
  }
}

/* ==========
=======以降タブレットサイズ=======
==========*/
@media screen and (min-width: 481px) {
  @media screen and (max-width: 960px){

#info{
  padding: 10px 15px!important;
}

/* 背景の花の画像*/
#left-img{
  display: none;
}
#right-img{
  display: none;
}

/* 問い合わせの電話番号クリックで電話アプリ立ち上げ*/
a[href^="tel:"]{
    pointer-events:auto!important;
  }

}
}

/*
=======================================
=============
link.htmlのcss
=======================================
=============*/
@media screen and (max-width: 480px) {
  /* リンク集*/
  #link{
    padding: 80px 15px 0 !important;
  }

 /* リンク集 個別*/
  .link-list{
    padding: 0 0 45px 0!important;
  }

  .link-content{
    padding: 0!important;
  }

  .link-content .content-title{
    padding-bottom: 15px!important;
  }

  .link-flex{
    display: inline-block;
  }

  .parent{
    padding-top: 5px;
  }

  .child{
    width: 100%!important;
    padding-bottom: 5px!important;
  }

  .link-text{
    width: 100%!important;
  }

  .link-text .parent{
    width: 100%!important;
  }
}

/* ==========
=======以降タブレットサイズ=======
==========*/
@media screen and (min-width: 481px) {
@media screen and (max-width: 960px){

/* リンク集*/
#link{
  padding:10px 15px!important;
}

.link-content{
  padding:10px 0!important;
  }
}
}

/*
=======================================
=============
lessons.htmlのcss
=======================================
=============*/
@media screen and (max-width: 480px) {
  /* お稽古案内 */
#rehearsal{
  padding:80px 15px 0;
}

.rehearsal-content{
  padding:0 0 35px!important;
}

.lessons-text{
  display: block!important;
  padding: 0!important;
}

.lessons-text p,
.lessons-text ul,
.lessons-text .rehearsal-img{
  width:100%!important;
}

.lessons-text .text,
.lessons-text ul{
  padding-right: 0!important;
}

.lessons-text .rehearsal-img{
  padding-top:20px;
}
}

/* ==========
=======以降タブレットサイズ=======
==========*/
@media screen and (min-width: 481px) {
@media screen and (max-width: 960px){

#rehearsal{
  padding: 10px 15px 30px!important;
}

.rehearsal-content{
  padding:10px 0!important;
  }
}
}

/*
=======================================
=============
tradition.htmlのcss
=======================================
=============*/
@media screen and (max-width: 480px) {
  /* 伝音*/
  #tradition{
    padding:80px 15px 0;
  }

  .tradition-title{
    padding: 0 5px!important;
  }

  .tradition-text{
    padding:10px 5px 20px!important;
  }

  .tradition-content{
    padding:20px 5px!important;
  }
}

/*
=======================================
=============
oriorinoki.htmlのcss
=======================================
=============*/
@media screen and (max-width: 480px) {
  /* 折々の記*/
  #detai{
    padding:80px 15px 0;
  }

  #detai-text{
    padding:10px 0 20px!important;
  }
}

/*
=======================================
=============
birthday.htmlのcss
=======================================
=============*/
@media screen and (max-width: 480px) {
  /* 誕生日を迎えて*/
  #birthday{
    padding:80px 15px 0;
  }

  #birthday-text{
    padding:10px 0 20px!important;
  }
}

/*
=======================================
=============
contact.htmlのcss
=======================================
=============*/

@media screen and (max-width: 480px) {

  /* 申込みフォーム*/
  #formWrap {
    width:95%;
    margin:0 auto;
  }

  table.formTable th,
  table.formTable td {
    width:auto;
    display:block;
  }

  table.formTable th {
    margin-top:5px;
	  border-bottom:0;
  }

  input[type="text"], input[type="number"] {
	  width:80%;
	  padding:5px;
	  display: inline-block;
  }

  textarea {
    width:100%;
    padding:5px;
  }

  .number-sheet{
    width: 20%!important;
  }

  .post-befo{
    width: 30%!important;
  }
  .post-after{
    width: 40%!important;
  }

  input[type="submit"], input[type="reset"],input[type="button"] {
	  height:40px;
  }

 }